﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="../../Content/highlighter/scripts/shCore.js"></script>
    <script type="text/javascript" src="../../Content/highlighter/scripts/shBrushCSharp.js"></script>
    <script type="text/javascript" src="../../Content/highlighter/scripts/shBrushXml.js"></script>
    <link type="text/css" rel="stylesheet" href="../../Content/highlighter/styles/shCore.css" />
    <link type="text/css" rel="stylesheet" href="../../Content/highlighter/styles/shCoreEclipse.css" />
    <script type="text/javascript">SyntaxHighlighter.all();</script>
</head>
<body>
    <h3>自定义控件</h3>
    <b>制作自定义插件</b>
    <p>
        1.首先定义实体类
    </p>
    <pre class="brush:csharp;">
        public class Link : NFinal.UI.BaseControll
        {
            public string id;
            public string name;
            public string content;
            public string href;
            //控件必须声明带Writer参数的初始化函数
            public Link(NFinal.IO.Writer writer):base(writer)
            {
                
            }
        }
    </pre>
    <p>2.然后在同级目录新建LinkTemplate.cshtml,并编辑控件视图信息：</p>
    <pre class="brush:csharp;">
        @inherits NFinal.Views.RazorView&lt;Link>
        <a id="@Model.id" name="@Model.name" src="@Model.src">@Model.content</a>
    </pre>
    <b>如何调用？</b><br/>
    1.声明控件
    <pre class="brush:csharp;">
        public class IndexController : BaseController
        {
            public void Index()
            {
                Link link=new Link(this);
                link.id="id";
                link.name="name";
                link.content="点击这里";
                link.href="http://bbs.nfinal.com";
                this.ViewBag.link=link;
                this.Render();
            }
        }
    </pre>
    2.生成以下实体类
    IndexController.template.cs
    <pre class="brush:csharp;">
        public namespace NFinalCorePlug.Controllers.IndexController_Model
        {
            public class Index
            {
                [NFinal.ViewBagMember]
		        public NFinal.Config.Plug.PlugConfig config;
                public Link link;
            }
        }
    </pre>
    3.调用控件
    <pre class="brush:csharp;">
        @inherits NFinal.Views.RazorView&lt;NFinalCorePlug.Controllers.IndexController_Model.Index>
        控件输出
        @Model.link.Render();
    </pre>
    <b>如何添加页头和页尾？</b><br />
    1.声明页头，页尾控件<br />
    <pre class="brush:csharp;">
        public class Header : NFinal.UI.BaseControll
        {
            public string content;
            public Link(NFinal.IO.Writer writer):base(writer)
            {
                
            }
        }
        public class Footer : NFinal.UI.BaseControll
        {
            public string content;
            public Link(NFinal.IO.Writer writer):base(writer)
            {
                
            }
        }
    </pre>
    2.然后在同级目录下生成以下视图,用户控件制做完成。<br />
    HeaderTemplate.cshtml<br />
    <pre class="brush:csharp;">
        @inherits NFinal.Views.RazorView&lt;NFinalCorePlug.Code.UserControl.Header>
        我是头。<br/>
        内容：@Model.content
    </pre>
    FooterTemplate.cshtml<br />
    <pre class="brush:csharp;">
        @inherits NFinal.Views.RazorView&lt;NFinalCorePlug.Code.UserControl.Footer>
        我是尾。<br />

        内容：@Model.content
    </pre>
    3.在父类添加页头页尾控件声明，添加ViewBagMember特性，并进行数据填充<br />
    <pre class="brush:csharp;">
        public class BaseController ： NFinal.OwinAction
        {
            [ViewBagMember]
            public Header header;
            [ViewBagMember]
            public Footer footer;
            public override Before()
            {
                header=new Header(this);
                footer=new Footer(this);
            }
        }
    </pre>
    4.让控制器继承该类，则系统自动生成的Model就会带header和footer两件控件
    <pre class="brush:csharp;">
        public class IndexController : BaseController
        {
            public void Index()
            {
                this.Render();
            }
        }
    </pre>
    5.在页面中调用。<br />
    Index.cshtml<br />
    <pre class="brush:csharp;">
        @inherits NFinal.Views.RazorView&lt;NFinalCorePlug.IndexController.Index_Model&gt;
        &lt;html&gt;
            &lt;head&gt;&lt;/head&gt;
            &lt;body&gt;
                &lt;header&gt;@Model.Header.Render();&lt;/header&gt;
                &lt;div&gt;内容&lt;/div&gt;
                &lt;footer&gt;@Model.Footer.Render();&lt;/footer&gt;
            &lt;/body&gt;
        &lt;/html>
    </pre>
</body>
</html>